<template>
	<div class="box">
		<view class="search" @click="searchClickFn">
			<uni-search-bar class="search_bar" placeholder="搜索" value="" :focus="false" cancelButton="none"
				@focus="focus">
			</uni-search-bar>
		</view>
		<myCard v-for="(item,index) in list" :key="index" :title="item.id">
			<view class="content_myCard">
				<view class="row">
					<view>
						<text class="lable">流程名</text><text class="value">{{item.name}} </text>
					</view>

				</view>
				<view class="row">
					<view>
						<text class="lable">流程分类</text><text class="value">{{ $mapLabel('bpm_model_category',item.category) }}</text>
					</view>


				</view>
				<view class="row">
					<view>
						<!-- <text class="lable">当前审批任务</text><text class="value">{{item.tasks}}</text> -->
					</view>
				</view>
				<view class="row">
					<view class="left">
						<text class="lable">状态</text><text class="value">{{  $mapLabel('bpm_process_instance_status',item.status)}}</text>
					</view>
					<view class="right">
						<text class="lable">结果</text><text class="value">{{$mapLabel('bpm_process_instance_result',item.result)}}</text>
					</view>

				</view>
				<view class="row">

					<view>
						<text class="lable">提交时间</text><text class="value">{{$formatDate({type:'YYYY-MM-DD HH:mm',date:item.createTime})}}</text>
					</view>


				</view>
				<view class="row">
					<view>

						<text class="lable">结束时间</text><text class="value">{{$formatDate({type:'YYYY-MM-DD HH:mm',date:item.endTime})}}</text>

					</view>
				</view>

			</view>
			<view class="" slot="footer">
				<button>详情</button>
			</view>

		</myCard>
		<view class="creat">
			<!-- 发起流程 -->
		</view>
	</div>

</template>

<script>
	import {
		getMyProcessInstancePage
	} from '@/api/bpm/processInstance.js'
	export default {
		data() {
			return {
				formData: {},
				searchResult: {},
				list: []
			}
		},
		onShow() {
			this.list = []
			this.searchResult.pageNo = 1;
			this.searchResult.pageSize = 10;
			this.getList();
			

		},
		onReachBottom() {
			this.searchResult.pageNo++
			this.getList(); // 页面滚动到底部时请求更多数据
		},
		methods: {
			// 用于解决样式覆盖问题
			focus() {
				console.log('123')
			},
			/** 查询列表 */
			async getList() {
				// 执行查询
				const {
					data
				} = await getMyProcessInstancePage(this.searchResult)
				this.list = [...this.list, ...data.list]
				console.log('list', data.list)
				// this.total = response.data.total;


			},
			// 点击搜索跳转到搜索页面
			searchClickFn() {
				console.log('搜嗦')
				uni.navigateTo({
					url: './modules/search'
				})
			},
			// 设置搜索值
			setSearchResult(searchResult) {
				this.searchResult = searchResult

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		// color: #fff;
		background-color: #fff;
		min-height: 100vh;



		.search {

			// 不让搜索框处罚点击
			.search_bar {
				pointer-events: none;
			}

		}

		.creat {
			position: fixed;
			bottom: 5vh;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			font-size: 30rpx;
			background-color: #0081ff;
			background: #0081ff url('@/static/images/creat.png');
			background-position: center;
			background-size: 60rpx;
			background-repeat: no-repeat;
			border-radius: 50%;

		}
	}
</style>